<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React!</title>
    <!--注意导入顺序-->
    <script src="./js/react.16.4.js"></script>
    <script src="./js/react-dom.16.4.js"></script>
    <script src="./js/prop-types.js"></script>
    <script src="./js/babel.min.js"></script>
    <!--将JSX语法 转换成javascript语法 -->
    <!--<script src=" ./js/babel.min.js"></script>-->
    <!--<script src="../script/jquery-1.10.min.js"></script>-->
</head>
<body>
<div id="example"></div>

<script type="text/babel">

    // todo 组件首字母大写
    // todo 样式 class 要用className
    // todo React 数字不需要带单位
    //todo 参数在this.props 中
    class LiList extends React.Component {
        render() {
            return (
                <ul>
                    {
                        React.Children.map(this.props.children, function (child, i) { // todo map 遍历对象 child 是value, i是index
                            console.log(i)
                            return <li>{child}</li>
                        })
                    }
                </ul>
            )
        }
    }


    class MyTitle extends React.Component {
        // static defaultProps = {  // todo 这里是默认的this.props. 中的值，方式一
        //     title: "123",
        // };
        static propTypes ={  // 属性验证 必须 是字符串，也可能通过  类似默认属性的方式二的方法
           title: PropTypes.string
            /*
            所有可验证属性
            https://reactjs.org/docs/typechecking-with-proptypes.html
            */
        };
        render() {
            return (
                <h1>{this.props.title}</h1>
            )
        }
    }

    MyTitle.defaultProps ={   // todo 这里是默认的this.props. 中的值，方式二，静态方法的
        title: "123",
    }

    class ComGroup extends React.Component {
        render() {
            return (
                /* todo 使用复合组件  使用div 包裹*/
                <div>
                    <MyTitle title={this.props.title}/>
                    <LiList>
                        <h1>this is h1</h1>
                        <a href="http://www.baidu.com">百度</a>
                    </LiList>
                </div>
            );
        }
    }

    // todo <liList> </LiList> 组件中间的 参数会保存到 this.props.children 属性中
    ReactDOM.render(
        <ComGroup />,
        document.getElementById("example")
    );

</script>
</body>

</html>